<template>
  <div class="setting-container">
    <template v-for="ad in adList">
      <div class="title" :key="`title_${ad.code}`"><span>{{ad.value}}</span></div>
      <el-form
        class="setting-item"
        label-width="100px"
        label-position="left"
        :model="ad.content"
        :key="ad.code">
        <!-- <el-form-item label="广告标题：">
          <el-input v-model="ad.content.adTitle" placeholder="请填写广告标题" />
        </el-form-item> -->
        <el-form-item label="广告描述：">
          <el-input type="textarea" v-model="ad.content.adRemark" placeholder="请填写广告描述，占位符请使用{blogNo} {blogId} {blogName}" />
        </el-form-item>
        <el-form-item label="广告链接：">
          <el-input type="textarea" v-model="ad.content.adLink" placeholder="请填写广告链接以英文逗号分隔" />
        </el-form-item>       
        <el-form-item label="广告图片：">
          <el-upload
            :action="uploadUrl"
            :multiple="false"
            :on-success="res => handleImgUpload(ad, res)"
            :file-list="ad.content.images"
            :on-remove="file => handleImgRemove(ad, file)"
          >
            <el-button size="small" type="primary">点击上传图片</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" icon="el-icon-tickets" :loading="ad.loading" @click="handleSave(ad)">保存</el-button>
        </el-form-item>
      </el-form>
    </template>
    <div class="bottom-bar"></div>
  </div>
</template>
<script>

import { getAdType, getAdContent, saveAd, uploadUrl } from '../api/index';
export default {
  name: 'AdSetting',
  data() {
    return {
      adList: [],
      uploadUrl
    };
  },
  methods: {
    getAdTypeList() {
      getAdType().then(res => {
        if (res.data.success) {
          this.adList = (res.data.data || []).map(ad => {
            ad.loading = true;
            ad.content = {
              adLink: '',
              adPic: '',
              adRemark: '',
              adTitle: '',
              images: []
            };
            getAdContent(ad.code).then(res => {
              ad.loading = false;              
              if (res.data.success && res.data.data.length) {
                ad.content = res.data.data[0];
                if (ad.content.adPic) {
                  ad.content.images = ad.content.adPic.split(',').map(url => {
                    const names = url.split('/');
                    return { name: names[names.length - 1], url };
                  });
                } else {
                  ad.content.images = [];
                }
              }
            });
            return ad;
          });
        }
      });
    },
    handleImgUpload(ad, res) {
      if (res.success) {
        const name = res.data.split('/');
        ad.content.images.push({
          name: name[name.length - 1],
          url: res.data
        });
      }
    },
    handleImgRemove(ad, file) {
      const index = ad.content.images.findIndex(item => (item.url === file.url || item.url === file.response.data));
      ad.content.images.splice(index, 1);
    },
    handleSave(ad) {
      const params = {
        adLink: ad.content.adLink,
        adPic: ad.content.images.map(item => item.url).join(','),
        adRemark: ad.content.adRemark,
        adType: ad.code
      }
      if (ad.content.adId) params.adId = ad.content.adId;
      ad.loading = true;
      saveAd(params).then(res => {
        if (res.data.success) {
          this.$message.success('保存成功！');
          ad.loading = false;
        }
      });
    }
  },
  mounted() {
    this.getAdTypeList();
  },
  beforeDestroy() {
    
  },
}
</script>

<style lang="scss" scoped>
.setting-container {
  padding: 0 15%;
}


.title {
  line-height: 40px;
  font-size: 16px;
  font-weight: bold;
  padding-left: 16px;
  background-color: #fff;
  border-bottom: 1px solid #f0f0f0;

  & > span {
    display: inline-block;
    border-bottom: 2px solid #000;
  }
}

.setting-item {
  padding: 16px;
  background-color: #fff;
  margin-bottom: 16px;
}
</style>
